<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <link rel="stylesheet" href="${ctx }/res/css/main.css">
    <link rel="stylesheet" href="${ctx }/res/css/plugins.css">
    <script type="text/javascript" src="${ctx }/res/hplus/js/jquery.min.js"></script>
    <title>软装到家</title>
    <style>
    	a {
    		cursor:pointer;
    	}
    	.active {
   		    text-decoration: none;
   			color: #e4393c;
    	}
    </style>
</head>
<body>
 
<%@include file="../head.jsp" %>

<div class="w-100p bg-f5 brand-list-box">
    <div class="w-1200 margin-0-auto brand-detail">
        <div class="row1 clear">
            <div class="cell">
                <div class="img-warp">
                    <img class="scrollLoading img-mini" src="${brandDTO.image }">
                </div>
                <div class="text">${brandDTO.content }</div>
            </div>
            <div class="cell">
                <img class="scrollLoading img-max" src="${brandDTO.headImage }">
            </div>
        </div>
        <div class="row2 clear">
            <div class="cell tab-nav" data-target="product-tab">
                <a href="javascript:void(0)">
                    <div class="number">${totalProduct }</div>
                    <div>产品</div>
                    <span class="icon"></span>
                </a>
            </div>
            <div class="cell tab-nav" data-target="plane-tab">
                <a href="javascript:void(0)">
                    <div class="number">${totalDesign }</div>
                    <div>方案</div>
                    <span class="icon"></span>
                </a>
            </div>
        </div>
    </div>
    <div class="w-1200 margin-0-auto product-tab tab-content">
        <div class="brand-cat">
            <div class="name">
                <span><a href="#" onclick="query('')">分类</a></span>
            </div>
            <div id="productCategoryDIV" class="cat-cells">
            	<span><a href="#" <c:if test="${empty query.categoryID }">class='active'</c:if>  onclick="query(''})">全部</a></span>
            	<c:forEach items="${productCategorys }" var="pc">
            		 <span><a href="#" <c:if test="${pc.id eq query.categoryID }">class='active'</c:if>  onclick="query(${pc.id})">${pc.name }</a></span>
            	</c:forEach>
            </div>
        </div>
        <div class="brand-cat">
            <div class="name">
                <span><a href="#" >排序</a></span> 
                <!-- onclick="sort('')" -->
            </div>
            <div class="cat-cells">
                <span> <a href="#" onclick="sort('')" <c:if test="${empty sortType }">class='active'</c:if>  >综合</a></span>
                <span> <a href="#" onclick="sort('2')" <c:if test="${sortType eq 2 }">class='active'</c:if> >销量</a></span>
                <span> <a href="#" onclick="sort('4')" <c:if test="${sortType eq 4 }">class='active'</c:if> >价格</a></span>
<%--                 <span> <a href="#" onclick="sort(1)" <c:if test="${sortType eq 1 }">class='active'</c:if> >人气</a></span> --%>
            </div>
        </div>
        <ul class="clear">
                <c:forEach items="${productDTOs }" var="pd">
	                <li>
	                    <a href="${ctx }/product/detail?id=${pd.id}">
	                        <div class="brand-img img-scale">
	                            <img class="scrollLoading" src="${pd.headImage }" style="width:264px; height: 200px;">
	                        </div>
	                        <div class="text">${pd.name }</div>
	                        <div class="price">￥<fmt:formatNumber value="${pd.maxPrice }" type="currency" pattern="0.00"/></div>
	                    </a>
	                </li>
                </c:forEach>
        </ul>
        <!--分页-->
        <%@include file="../page4hardcoverProduct.jsp" %>
        <!-- 分页结束 -->
    </div>
    <div class="w-1200 margin-0-auto plane-tab tab-content">
        <ul class="clear">
        		<c:forEach items="${designProductDTOs }" var="dp">
        		
        			<li>
                    <a href="${ctx }/design/detail?id=${dp.design.id}">
                        <div class="brand-img img-scale">
                             <img class="scrollLoading" src="${dp.design.headImage }" /> 
                            <div class="bottom-info">
                                <span>${dp.design.houseStyle.name }</span>
                                <span>${dp.design.houseType.name }</span>
                                <i></i>
                                <span>${dp.design.area }</span>
                                <i></i>
                                <span>${dp.design.houseStyle.name }</span>
                                <i></i>
                                <span>${totalDesignProduct }件套</span>
                            </div>
                        </div>
                    </a>
                </li>
        		</c:forEach>
                
                
        </ul>
        <!--分页-->
        
        <%@include file="../page4hardcoverDesign.jsp" %>
        <!--分页  -->
    </div>
    
    <script type="text/javascript">
        $(document).ready(function () {
             $('.tab-nav').on('click',function (event) {
                 $('.tab-nav').removeClass('active');
                 var $this = $(this),
                     target = $this.data('target');
                 $this.addClass('active');
                 $('.tab-content').fadeOut();
                 $("."+target).fadeIn();
                 if(target == 'product-tab'){
                     console.log(target)
                 }else if(target == 'plane-tab'){
                     console.log(target)
                 }
             });
            $('.tab-nav').eq(0).trigger('click');
        });
    </script>
</div>

<%@include file="../foot.jsp" %>

<script type="text/javascript">
    $(document).ready(function () {
        $("img.scrollLoading").lazyload({effect: "fadeIn", threshold: 300});
        $(".scrollLoading1 img").lazyload({effect: "fadeIn"});
    });
</script>
<script type="text/javascript" src="/js/plugins.js"></script>
<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript" src="/js/modules.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.tab-box').tab();  
        
        var temp = "";
        $('#productCategoryDIV span').each(function(index, ele){
        	text = $(this).text();
        	if (text == '其他') {
        		temp = $(this).html();
        		 $(this).remove();
        	}
        });
        if (temp != "") {
        	
        	$('#productCategoryDIV').append("<span>" +temp + "</span>");
        }
        
    })
</script>

<script type="text/javascript">
	function query(categoryID) {
		var pageNum = parseInt($('#pageProduct').val());
		var styleID = $('#styleID').val();
		var brandID = $('#brandID').val();
		var sortType = $('#sortType').val();
		
		gotoPageProduct(pageNum, styleID, brandID, categoryID, sortType)
	}
	
	function sort(sortType) {
		var pageNum = parseInt($('#pageProduct').val());
		var styleID = $('#styleID').val();
		var brandID = $('#brandID').val();
		var categoryID = $('#categoryID').val();
		
		gotoPageProduct(pageNum, styleID, brandID, categoryID, sortType)
	}
	
	function gotoPageDesign(pageNum, styleID, brandID) {
		alert("gotoPageDesign");
		location="${ctx}/hardcover/detail?page=" + pageNum + "&styleID=" + styleID + "&brandID=" + brandID;

	}
	
	function gotoPageProduct(pageNum, styleID, brandID, categoryID, sortType) {
		location="${ctx}/hardcover/detail?pageNum=" + pageNum + "&styleID=" + styleID + "&brandID=" + brandID + "&categoryID=" + categoryID + "&sortType=" + sortType;

	}
</script>
</body>
</html>
